<template>
  <div class="main">
    <div class="bigbox" style="max-width: 1920px;">
      <div>
        <el-row :gutter="30" justify="center" >
          <el-col :span="1.5">
            <p class="title" style="font-weight: bolder">解决方案</p >
          </el-col>
          <el-col :span="1.5" class="bot">
            <p>热门</p >
          </el-col>
          <el-col :span="1.5"  class="bot">
            <p><router-link to="/home1">智慧灌区</router-link></p >
          </el-col>
          <el-col :span="1.5"  class="bot">
            <p>智慧水利</p >
          </el-col>
          <el-col :span="1.5" class="bot">
            <p>城市生命线</p >
          </el-col>
          <el-col :span="1.5" class="bot">
            <p>地质安全</p >
          </el-col>
        </el-row>
      </div>
      <img src="https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/3db6a13b-64e2-4102-9fb0-93a4fdc6e176.jpg" alt="" />
    </div>
    <div class="artifactbox">
      <el-text type="info" style="font-size:xx-large;font-weight: bolder; color: #333333">解决方案</el-text>
      <div style=" width:75px; border-bottom-style: solid; border-color: #005bac; margin-bottom: 50px;margin-top: 20px"></div>
       <el-row :gutter="30">
         <el-col
             v-for="(item, index) in 8"
             :key="index"
             :xs="4" :sm="6" :md="12" :lg="12" :xl="12"
             style="margin-bottom: 20px"
             class="image-wrapper"
             @mouseover="hoverStates[index] = true"
             @mouseleave="hoverStates[index] = false"
             @click="handleClick(index)"
         >
           <el-image
               class="responsive-image"
               :class="{ 'hover-effect': hoverStates[index] }"
               fit="contain"
               :src="imageSrc[index]"
           />
           <div class="dynamic-text">
             <p style="font-size: 1.5rem">解决方案</p>
             <p style="font-size:2rem">{{ titles[index] }}</p>
             <p class="text_hidden" :class="{ 'hover-effect': hoverStates[index] }">查看更多>></p>
           </div>
         </el-col>
       </el-row>
      <el-row>
        <el-col :span="12" :offset="8">
          <el-pagination
              v-model:current-page="currentPage3"
              v-model:page-size="pageSize3"
              :size="size"
              :disabled="disabled"
              :background="background"
              layout="prev, pager, next, jumper"
              :total="1000"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>

    </div>


  </div>
</template>
<script setup>
import { listTicket,listCulturalRelic  } from "@/api/serch/index";
import { ref, onMounted, nextTick,reactive,toRefs } from "vue";
import Swiper, { Pagination, Navigation } from "swiper";
const apiUrl = process.env.VUE_APP_API_URL;
import "swiper/css/swiper.min.css";
import router from "@/router";
const swiper = ref(null);
const isHovered = ref(false); // 悬停状态

// 使用响应式数组存储每个图片的悬停状态
const hoverStates = ref(Array(8).fill(false))

const titles = [
  '小型水库雨水情测报及大坝安全检测建设介绍',
  '大型灌区信息化解决方案',
  '城市管网流量水质监测系统方案',
  '大中型水闸安全监测管理系统建设方案',
  '“厂站网河库”提质增效一体化智能管理系统',
  '城市内涝预警系统',
  '水资源在线计量监测系统',
  '淤地坝监测预警系统',
  '水库信息化监管系统',
  '灌区信息化解决方案'
]

const imageSrc = [
  'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/3734a22e-a002-4e14-b7ba-50aaafb1a022.jpg',
  'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/5ed570a4-fbc3-411b-97c4-0457d0b8a477.jpg',
  'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/3734a22e-a002-4e14-b7ba-50aaafb1a022.jpg',
  'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/5ed570a4-fbc3-411b-97c4-0457d0b8a477.jpg',
  'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/3734a22e-a002-4e14-b7ba-50aaafb1a022.jpg',
  'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/5ed570a4-fbc3-411b-97c4-0457d0b8a477.jpg',
  'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/3734a22e-a002-4e14-b7ba-50aaafb1a022.jpg',
  'https://omo-oss-image.thefastimg.com/portal-saas/new2021123117324127486/cms/image/5ed570a4-fbc3-411b-97c4-0457d0b8a477.jpg',
];
const handleClick = (index) => {
  router.push('/solutionDetailed')
}
</script>
<style lang="scss" scoped>


.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.title {
  border-right: 1px solid #7272725b;
  padding-right: 25px; 
}


.main {
  width: 100%;

  .bigbox {
    margin: 0 auto;
    img {
      width: 100%;
      height: auto;
    }
  }
  .artifactbox {
    margin: 60px auto 0;
    width: 80%;
  }

}
@media (min-width: 1921px) {
  .main {
    .bigbox {
      max-width: 100%!important;
    }
  }
}

.image-wrapper {
  position: relative;
  max-width: 100%; /* 响应式控制 */
  display: inline-block;
  overflow: hidden; /* 隐藏放大溢出的部分 */
  border-radius: 8px; /* 可选圆角 */
}

.responsive-image {
  width: 100%;
  height: auto;
  transition: all 0.3s ease; /* 过渡动画 */
}
/* 悬停时的图片效果 */
.responsive-image.hover-effect {
  transform: scale(1.05); /* 放大5% */
  filter: brightness(0.8); /* 变暗 */
}

.dynamic-text {
  position: absolute;
  bottom: 1%;
 left: 3%;
  color: #fff;
  padding: 8px 16px;

}
.text_hidden {
  max-height: 0;
  opacity: 0;
  transition: all 0.4s ease-in-out;
  transform: translateY(10px);

  &.hover-effect {
    max-height: 50px;
    opacity: 1;
    transform: translateY(0);
  }
}
///* 修改动画为独立控制 */
//.text_hidden {
//  opacity: 0;
//  transform: translateY(20px);
//  transition: all 0.3s ease;
//}
//
//.text_hidden.hover-effect {
//  opacity: 1;
//  transform: translateY(0);
//}

.bot{
  border-bottom-style: solid;
  border-bottom-color: white; 
}
a{
  color: #000000;
  text-decoration: none;
}
.bot:hover{
  border-color: #005bac;
}

</style>